<template>
    <div id="dialogContainer" class="list-container" style="width:100%;height:100%;position: relative">
        <div class="font_btn" v-if="config.showName">{{ config.name }}</div>
        <component
            v-bind:class="{ 'p_top30' : config.showName}"
            ref="current"
            :is="currentView"
            :onload="onload"
            :formdata="formdata"
            :colsJsonStr="colsJsonStr"
            :searchJsonStr="searchJsonStr"
            :topBtnsJsonStr="topBtnsJsonStr"
            :layerid="layerid"
            :destroy="destroy"
            :lydata="lydata"
            :secondEdit="secondEdit"
            :dialogVm="customVm?customVm:this"></component>
    </div>
</template>

<script>
import Vue from 'vue';
import {FormBoListPreview,PublicFunction,CustomViewFunc,Util} from "@lowcode/jpaas-common-lib";
import FormBoListExt from "./FormBoListExt";
import '@/views/modules/form/core/renderViews/renderIndex';
import FullScreen from "@/views/modules/form/core/js/FullScreen";

export default {
    name:"FormBoListPreviewList",
    mixins:[FullScreen],
    props:{
        "html":{
            type:String
        },
        "colsJsonStr":{
            type:String
        },
        "searchJsonStr":{
            type:String
        },
        "topBtnsJsonStr":{
            type:String
        },
        "onload":{
            type:Function
        },
        "customVm":{
            type:[Object,Function]
        },
        //表单数据映射
        "formdata":{
            type:Object
        },
        "layerid": {
            type: String
        },
        "destroy": {
            type: Function
        },
        "lydata":{
            type: Object
        },
        //这个预览时不允许二次编辑表单列表
        secondEdit: {
            type: String
        },
        config: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data(){
        return {
            currentView: {
                template: "<div>"+this.$ti18('rxCommon.Loading','正在加载...')+"</div>"
            }
        }
    },
    created() {
        this.load();
    },
    watch:{
        "html":function(val){
            this.html=val;
            this.load();
        }
    },
    methods:{
        load(){

            var template=this.$ti18('rxList.noData','无数据'),script={};
            template=`<div>${template}</div>`;

            var templateMath = this.html.match(/<template>([\s\S]*)<\/template>/);
            if (templateMath != null) {
                template=templateMath[1];
            }
            var scriptMath = this.html.match(/<script>([\s\S]*)<\/script>/);
            if (scriptMath != null) {
                script=scriptMath[1];
                let vueJs=Util.replaceDefault(script);
                vueJs=`let sc=${vueJs};return sc;`;
                script=new Function(vueJs)();
            }

            var listComponent= Vue.component('custom-list', {
                mixins: [FormBoListPreview,PublicFunction,FormBoListExt,CustomViewFunc],
                template: template,
                ...script
            })
            this.loadLink();
            this.loadStyle();
            this.currentView=listComponent;
        },
        loadLink(){
            var linkMath = this.html.match(/<link id=".*" href=".*" \/>/g);
            if(linkMath==null){
                return;
            }
            for(var i=0;i<linkMath.length;i++){
                var link = linkMath[i].match(/<link id="([\s\S]*)" href="([\s\S]*)" \/>/);
                if(link){
                    var id=link[1];
                    var newLink=document.getElementById(id);
                    if(!newLink){
                        newLink=document.createElement('link');
                        document.getElementsByTagName('head')[0].appendChild(newLink)
                    }
                    newLink.id=id;
                    newLink.rel="stylesheet";
                    newLink.type="text/css";
                    newLink.href=link[2];
                }
            }
        },
        loadStyle(){
            var style="";
            var styleMath = this.html.match(/<style scoped>([\s\S]*)<\/style>/) || this.html.match(/<style>([\s\S]*)<\/style>/);
            if (styleMath != null) {
                style=styleMath[1];
            }

            var newStyle=document.getElementById("previewStyle");
            if(!newStyle){
                newStyle = document.createElement('style');
                document.getElementsByTagName('head')[0].appendChild(newStyle)
            }
            newStyle.id="previewStyle";
            newStyle.innerHTML = style;
        },
        loadByParams(params){
            var ctl=this.$refs.current;
            ctl.loadByParams(params);
        },
        loadData(){
            var ctl=this.$refs.current;
            ctl.loadData();
        },
        /**
        * 执行自定义JS方法。
        * @param method
        * @param data
        */
        executeMethod(method,data){
          var ctl=this.$refs.current;
          if(!ctl[method]){
            this.$message.warn("请在当前组件中配置方法:" +method);
            return;
          }
          if(data){
            ctl[method](data);
          }
          else{
            ctl[method]();
          }

        }
    }

}
</script>

<style scoped>
/*标题固定，列表部分可以滚动，仅限列表滚动，防止出现双滚动条*/
.font_btn {
    background: #fafafa;
    padding: 5px 10px;
    border-bottom: 1px solid #dadde0;
    font-size: 14px;
    position: absolute;
    top: 0px;
    width: calc(100% - 3px);
    z-index: 19;
    text-align: left;
}
.rx-table .blockLi .blockLiBox {
    min-height: 24px !important;
}
.p_top30 {
    padding-top: 30px!important;
}

.fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    z-index: 800;
    background-color: #fff;
}

</style>